<template>
	<el-steps :active="value" align-center class="steps">
		<el-step v-for="(item, index) in data" v-bind="item" :key="index"></el-step>
	</el-steps>
</template>

<script>
export default {
	name: 'Steps',
	props: {
		value: {
			type: Number,
			default: 1,
		},
		data: {
			type: Array,
			default: () => [],
		},
	},
};
</script>

<style scoped lang="scss">
.steps {
	::v-deep {
		.el-step.is-horizontal .el-step__line {
			top: 22px;
			background-color: rgba(112, 112, 112, 0.2);
			height: 1px;
		}
		.el-step__icon {
			width: 46px;
			height: 46px;
			border: 1px solid;
		}
		.is-finish {
			.el-step__icon {
				background: var(--primary-color);
				color: #fff;
				font-size: 12px;
			}
		}
		.el-step__title.is-wait {
			border-color: #999999;
			color: #999999;
		}
		.is-process {
			border-color: #999999;
			color: #999999;
			font-weight: normal;
			.el-step__icon {
				font-size: 12px;
			}
		}
	}
}
</style>
